<template>
    <el-container class="home-container">
        <el-header>
            <div>
<!--                <img src="../assets/logo.png" />-->
                <span>知识付费-直播带货后台管理系统</span>
            </div>
          <div id="u125" class="ax_default image2" data-label="头像80px" style="width: 1683px; height: 56px;">
            <img id="u125_img" class="img " :src="imgurl+headurl" style="position: absolute;left: 1730px;border-radius: 50%;">
            <div id="u125_text" class="text " style="display:none; visibility: hidden">
              <p></p>
            </div>
          </div>

            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <el-aside :width="isCollapse ? '65px' : '200px'">
                <div class="toggle-button" @click="toggleClapse">||||</div>
                <el-menu
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router
                        unique-opened
                        :collapse="isCollapse"
                        :collapse-transition="false"
                >
                    <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{item.name}}</span>
                        </template>
                        <el-menu-item
                                :index="subMenu.url+''"
                                v-for="subMenu in item.children"
                                :key="subMenu.id"
                        >
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{subMenu.name}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view v-if="isRouterAlive" />
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    export default {
        data() {
            return {
              menuList: [
                {
                  id: 0,
                  name: "",
                  children: [{ id: 0, name: "", url: "" }]
                }
              ],
              isCollapse: false,
              isRouterAlive: true,
              //当前账户
              account:"",
              imgurl:this.$MyUrl.imgUrl + "manager/",
              headurl:''
            };
        },
        methods: {
          logout() {
            sessionStorage.clear();
            this.$router.push("/login");
          },
          toggleClapse() {
            this.isCollapse = !this.isCollapse;
          },

          loadMenus() {
            this.account = JSON.parse(sessionStorage.getItem("userInfo")).empaccount;
            let url = "menu/showMenusByAccount";
            this.$axios.get(url,{
              params:{
                account:this.account
              }
            }).then(res=>{
              if (res.data.code == 200){
                this.menuList = res.data.data;
                console.log(this.menuList);
                this.$router.push("/Home");
              }else{
                this.$message({
                  message:res.data.msg,
                  type:'error',
                  duration:1000
                })
              }
            })
          }
        },
      created() {
          this.loadMenus();
          this.headurl = JSON.parse(sessionStorage.getItem("userInfo")).empheadportrait;
          console.log(this.imgurl + this.headurl);
      }

    };
</script>
<style lang="less" scoped>
    img {
        width: 30px;
        height: 30px;
    }
    .toggle-button {
        background-color: #373d48;
        font-size: 10px;
        text-align: center;
        color: #fff;
        letter-spacing: 0.2em;
        cursor: pointer;
    }

    .el-header {
        background:linear-gradient(91.687045764522deg, rgba(0, 110, 255, 1) 40%, rgba(24, 144, 255, 1) 100%);
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #fff;
        font-size: 22px;
        > div {
            display: flex;
            align-items: center;
            span {
                margin-left: 14px;
            }
        }
    }
    .el-aside {
        background-color: #333744;
        .el-menu {
            border-right: 0;
        }
    }
    .el-main {
        background-color: #eaedf1;
    }
    .home-container {
        height: 100%;
    }
</style>